

<template>
    <view class="rankList">

        <view class="bg">
            <image class="rankText w-center" :style="{ top: rankTextTop + 'px' }" src="/static/image/rankList.png" mode="" />
        </view>

        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="position:fixed;z-index:100;width:750rpx;background:#333;"

            :style="{ height: systemInfo.statusBarHeight + 'px',background: `rgba(51, 51, 51,${opacityNum})` }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;position:fixed;z-index:100;"
            :style="{ top: systemInfo.statusBarHeight + 'px',background: `rgba(51, 51, 51,${opacityNum})` }"
        >
            <view class="left_box" @tap="goBack">
                <i class="icon icon-fanhui" style="font-size:40rpx; color:#fff;"></i>
            </view>
            <view class="title d-flex a-center j-between" style="color:#fff;">排行榜</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        <view 
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="rankTop" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">
                <image class="rank_bg" src="/static/image/rank.png" mode="" />
                <view class="time d-flex a-center j-center text1">
                    <text>
                        <text class="num" v-if="formatTopText(one)!=='暂无上榜'" >{{formatTopText(one)}}</text>
                        <text class="tian" v-if="formatTopText(one)!=='暂无上榜'" >{{formatUnitText(one)}}</text>
                        <text class="no" v-if="formatTopText(one)==='暂无上榜'">{{formatTopText(one)}}</text>
                    </text>
                </view>
                <view class="time d-flex a-center j-center text2">
                    <text>
                        <text class="num" v-if="formatTopText(two)!=='暂无上榜'" >{{formatTopText(two)}}</text>
                        <text class="tian" v-if="formatTopText(two)!=='暂无上榜'" >{{formatUnitText(two)}}</text>
                        <text class="no" v-if="formatTopText(two)==='暂无上榜'">{{formatTopText(two)}}</text>
                    </text>
                </view>
                <view class="time d-flex a-center j-center text3">
                    <text>
                        <text class="num" v-if="formatTopText(three)!=='暂无上榜'" >{{formatTopText(three)}}</text>
                        <text class="tian" v-if="formatTopText(three)!=='暂无上榜'" >{{formatUnitText(three)}}</text>
                        <text class="no" v-if="formatTopText(three)==='暂无上榜'">{{formatTopText(three)}}</text>
                    </text>
                </view>

                <view class="rank_user d-flex d-c a-center j-between user1" v-if="showTop(one)">
                    <view class="uname w-center">{{one.userName}}</view>
                    <image class="img" :src="one.userPhoto" mode="" />
                </view>
                <view class="rank_user d-flex d-c a-center j-between user2" v-if="showTop(two)">
                    <view class="uname w-center">{{two.userName}}</view>
                    <image class="img" :src="two.userPhoto" mode="" />
                </view>
                <view class="rank_user d-flex d-c a-center j-between user3" v-if="showTop(three)">
                    <view class="uname w-center">{{three.userName}}</view>
                    <image class="img" :src="three.userPhoto" mode="" />
                </view>
            </view>

            <view class="list" :style="{ top: `calc(552rpx + ${systemInfo.statusBarHeight}px)` }">
                <view class="title d-flex a-center j-between">
                    <view class="d-flex a-center">
                        <view class="dot"></view>
                        <text class="text">全部数据</text>
                    </view>

                    <view class="tabs d-flex a-center">
                        <view class="tab d-flex a-center j-center" :class="{active:activeTab===1}" @tap="changeTab(1)">累计</view>
                        <view class="tab d-flex a-center j-center" :class="{active:activeTab===2}" @tap="changeTab(2)">连续</view>
                        <view class="tab d-flex a-center j-center" :class="{active:activeTab===3}" @tap="changeTab(3)">减重</view>
                    </view>
                </view>

                <view class="card">
                    <view class="thead d-flex a-center">
                        <view class="c1">排名</view>
                        <view class="c2"><text style="margin-left:20rpx;">胖友</text></view>
                        <view class="c3">{{c3ThName}}</view>
                    </view>

                    <scroll-view class="scroll" :scroll-y="true" >
                        <view class="row d-flex a-center" v-for="item,index in list">
                            <view class="c1">{{index+1}}</view>
                            <view class="c2 d-flex a-center">
                                <userhead width="100" height="100" :saveKey="item.userId" :isVip="item.isVip" :src="item.userPhoto"/>
                                <view class="msg d-flex d-c">
                                    <view class="d-flex a-center">
                                        <sexage :sex="item.sex" :age="item.age" />
                                        <view class="name">{{item.userName}}</view>
                                    </view>

                                    <view class="desp" v-if="activeTab!==3">
                                        已减重:{{item.yjz}}kg
                                    </view>

                                </view>
                            </view>
                            <view class="c3">{{getC3(item)}}</view>
                        </view>
                        <view style="height:5rpx;"></view>

                    </scroll-view>



                </view>
            </view>

            <view class="heightBox"></view>


        </view>

    </view>
</template>

<script setup lang="ts">
import { ref,computed,reactive } from "vue";
import { onReady, onShow, onLoad,onUnload,onPageScroll } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getRankList } from "@/api/api";
import { config as configStore } from "@/store/config";
import { getCircleDetail} from "@/api/api";
import cacheimg from "@/components/cacheimg.vue";
import userhead from "@/components/userhead.vue";
import sexage from "@/components/sexages.vue";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { centToYuan } from "@/utils/format";


const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const activeTab = ref(1);

const opacityNum: any = ref(0); //响应式

const changeTab = (num:number)=>{
    activeTab.value =num;
    page = 1;
    rows = 10;
    list.value = [];
    GetRankList(true);
}

const c3ThName = computed(()=>{
    if(activeTab.value===1){
        return '累计打卡'
    }
    if(activeTab.value===2){
        return '连续打卡'
    }
    if(activeTab.value===3){
        return '累计减重'
    }
    return;
})

const getC3=(item)=>{
    if(activeTab.value===1){
        return `${item.ljdk||0}天`
    }
    if(activeTab.value===2){
        return `${item.lxdk||0}天`
    }
    if(activeTab.value===3){
        return `${item.yjz||0}kg`
    }
}

const formatTopText = computed(() => (item: any) => {
    if(activeTab.value===1){

        if(item.ljdk){
            return `${item.ljdk||0}`
        }else{
            return '暂无上榜'
        }

    }
    if(activeTab.value===2){
        if(Number(item.lxdk)){
            return `${item.lxdk||0}`
        }else{
            return '暂无上榜'
        }

    }
    if(activeTab.value===3){
        if(item.yjz){
            return `${item.yjz||0}`
        }else{
            return '暂无上榜'
        }

    }
});

const formatUnitText = computed(() => (item: any) => {
    if(activeTab.value===1){
        return '天'

    }
    if(activeTab.value===2){
        return '天'
    }
    if(activeTab.value===3){
        return 'kg'
    }
});


// const formatTopText=(item)=>{
// }
const showTop=(item)=>{
    if(activeTab.value===1){
        return !!Number(item.ljdk)

    }
    if(activeTab.value===2){
        return !!Number(item.lxdk)

    }
    if(activeTab.value===3){
        return !!Number(item.yjz)

    }
}

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if (scrollTop >= 0) {
        // 导航条颜色透明渐变
        if (scrollTop <= 20) {
            opacityNum.value = 0;
        } else if (20 < scrollTop && scrollTop <= 100) {
            opacityNum.value = scrollTop / 100;
        } else if (scrollTop > 100) {
            opacityNum.value = 1;
        }
    }
});



const rankTextTop = computed(()=>{
    return systemInfo.statusBarHeight + uni.upx2px(44);
})

const showServiceisNew = computed(()=>{
    return !baseService.value.includes(
        currentShowService.value.photo
    )
})


const editGroup = () => {
    uni.navigateTo({
        url: `/pages/quanzi/createCircle?groupId=${groupId.value}`,
    });
};

const groupId = ref('')

const groupDetail = ref({});

const goBack = () => {
    uni.navigateBack();
};

const one = ref({})
const two = ref({})
const three = ref({})





let page = 1;

let rows = 10;

const list = ref([]);

const GetRankList = async (refesh)=>{


    one.value = {}
    two.value = {}
    three.value = {}


    const params = {
        page,
        rows,
        groupId:groupId.value,
        topType:activeTab.value
    }

    const res = await getRankList(params);

    if(refesh){
        list.value = res.data.list;
        if(res.data.list[0]){
            one.value = res.data.list[0]
        }
        if(res.data.list[1]){
            two.value = res.data.list[1]
        }
        if(res.data.list[2]){
            three.value = res.data.list[2]
        }
    }
}



onReady(() => {});
onShow(() => {
});
onLoad((option: any) => {
    if(option.groupId){
        groupId.value = option.groupId;
        GetRankList(true);
    }
});

onUnload(() => {});

</script>

<style lang="scss" scoped>




.rankList{

    .heightBox {
                height: constant(safe-area-inset-bottom);
                height: env(safe-area-inset-bottom);
                min-height: 20rpx;
            }

    .bg{
        z-index:1;
        position:fixed;
        width:750rpx;
        height:100vh;
        background: linear-gradient(180deg, #353535 0%, #181818 100%);
        .rankText{
            width:545rpx;
            height:51rpx;
        }
    }

    .content{
        position:absolute;
        z-index:10;
        width:750rpx;
        left:0;
        right:0;
        bottom:0;
        overflow:hidden;
        .rankTop{
            position:fixed;
            width:668rpx;
            left:42rpx;
            height:452rpx;
            .rank_bg{
                position: absolute;
                width:668rpx;
                height:308rpx;
                bottom:0;
                left:0;
            }
            .time{
                color:#983A00;
                font-size: 32rpx;
                .num{
                    font-family: 'din',DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                }
                .tian{
                    font-size:24rpx;
                    font-weight: bold;
                }
                .no{
                    font-size:26rpx;
                }
                &.text1{
                    position:absolute;
                    top:246rpx;
                    left:237rpx;
                    width:193rpx;
                    height:50rpx;
                }

                &.text2{
                    position:absolute;
                    top:278rpx;
                    left:24rpx;
                    width:170rpx;
                    height:50rpx;
                }
                &.text3{
                    position:absolute;
                    top:278rpx;
                    right:24rpx;
                    width:170rpx;
                    height:50rpx;
                }
            }
            .rank_user{
                position:absolute;
                width:130rpx;
                height:190rpx;
                &.user1{
                    left:270rpx;
                    top:20rpx;
                }
                &.user2{
                    left:50rpx;
                    top:55rpx;
                }
                &.user3{
                    right:50rpx;
                    top:55rpx;
                }

                
                .img{
                    width: 130rpx;
                    height: 130rpx;
                    box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
                    border: 3rpx solid #FFFFFF;
                    border-radius: 50%;
                    position: absolute;
                    bottom:0;
                    left:0;
                }
                .uname{
                    white-space: nowrap;
                    font-size:24rpx;
                    color:#fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    lines:1;
                    top:5rpx;
                }
            }
        }

        .list{
            position:fixed;
            width:750rpx;
            background:#fff;
            border-top-left-radius: 50rpx;
            border-top-right-radius: 50rpx;
            padding-bottom:30rpx;
            bottom:0;
            .title{
                width:750rpx;
                height:100rpx;
                padding:0 30rpx;
                .dot{
                    width: 6rpx;
                    height: 30rpx;
                    background: #1DC691;
                    border-radius: 3rpx;
                    margin-right:10rpx;
                }
                .text{
                    color:#333;
                    font-size: 34rpx;
                    font-weight:600;
                }
            }

            .tabs{
                width:360rpx;
                height:50rpx;
                border-radius: 10rpx;
                overflow: hidden;
                .tab{
                    width:120rpx;
                    height:50rpx;
                    background: #F5F7FB;
                    font-size:28rpx;
                    color:#999;
                    transition: all linear 0.15s;
                    &.active{
                        background:#F79B50;
                        color:#fff;
                    }
                }
            }

            .card{
                position:absolute;
                width: 690rpx;
                background: #F5F7FB;
                border-radius: 10rpx;
                margin:0 auto;
                top:100rpx;
                left:30rpx;
                bottom:30rpx;
                .scroll{
                    position:absolute;
                    width:690rpx;
                    top:100rpx;
                    bottom:0rpx;
                }
                .thead{
                    height:100rpx;
                    font-size:24rpx;
                    color:#666;
                }
                .c1{
                    width:150rpx;
                    text-align: center;
                }
                .c2{
                    width:380rpx;
                    text-align: left;
                }
                .c3{
                    flex:1;
                    text-align: center;
                }
                .row{
                    height:100rpx;
                    margin-bottom:40rpx;
                    .c1{
                        font-size:28rpx;
                        color:#333;
                        font-weight:600;
                    }
                    .c2{
                        .msg{
                            margin-left:10rpx;
                            gap:8rpx;
                            .name{
                                font-size:28rpx;
                                color:#333;
                                margin-left:10rpx;
                            }
                            .desp{
                                font-size:24rpx;
                                color:#999;   
                            }
                        }
                    }
                    .c3{
                        font-size:28rpx;
                        color:#333;
                    }

                }
            }
        }


    }

}
</style>
